<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title {
            display: inline-block;
            padding: 10px 20px;
            color: slategray;
            cursor: pointer;
            border: none;
        }

        .hot-content,
        .category-content {
            display: none;
        }

        .new-content,
        .hot-content,
        .category-content {
            width: 800px;
            min-height: 200px;
            background-color: steelblue;
            margin: 20px auto;
        }

        .title.active {
            color: orange;
            border-bottom: 2px solid orange;
        }

        .aaa {
            float: left;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
    <p>发现酷玩</p>
    <span class="title active" content1="new-content">最新</span>
    <span class="title" content1="hot-content">最热</span>
    <span class="title" content1="category-content">品类</span>
    <div class="new-content">
        最新
    </div>
    <div class="hot-content">
        最热
    </div>
    <div class="category-content">

    </div>

    <script>

        $(function () {
            // js加载的时间放在最后 先加载文档 让用户看到
            var titles = $('.title');
            var div1 = $('.new-content')
            var div2 = $('.hot-content')
            var div3 = $('.category-content')
            $.each(titles, function (index, el) {
                $(el).click(function () {
                    // 点击事件
                    // 先清除所有的active 然后给当前点击的元素添加active
                    $('.title.active').removeClass('active');
                    $(this).addClass('active');
                    var contentName = $(this).attr('content1');;
                    // 上面是切换标题，还需要切换内容，也就是3个大div的显示隐藏
                    // 发请求获取对应的数据--根据点击的标题不同 请求地址也不同
                    if (contentName === 'category-content') {
                        // 显示品类 并获取品类的数据
                        div1.hide();
                        div2.hide();
                        div3.show();
                        // 调接口 获取数据
                        getData('play/category')
                    } else if (contentName === 'hot-content') {
                        // 显示最热 并获取最热的数据
                        div1.hide();
                        div2.show();
                        div3.hide();
                        getData('play/hot')
                    } else if (contentName === 'new-content') {
                        // 显示最新 并获取最新的数据
                        div1.show();
                        div2.hide();
                        div3.hide();
                        getData('play/new')

                    }
                })
            })

            function getData(url) {
                // 第一次拿到数据后存入本地存储 再次调用这个函数时如果有数据就不发请求
                // localStorage.getItem()...if(无数据){ajax}
                $.ajax({
                    url: 'http://localhost:3000/' + url,
                    success(res) {
                        console.log(res);
                        // localStorage.setItem(最新？最热？品类)
                        // 准备一个空字符串用来存储div中的内容
                        var strTem = ''
                        for (var i = 0; i < res.length; i++) {
                            strTem += "<div>" +
                                "<p>" + res[i].title + "</p>" +
                                "<div>";
                            for (var j = 0; j < 5; j++) {
                                strTem += "<div class=aaa>" +
                                    "<img src=./imgs/cat_" + (j + 1) + ".png>" +
                                    "<div>空气净化器(21)</div>" +
                                    "</div>"
                            }

                            strTem += "</div>" +
                                "<div>" +
                                "<div>空气净化器(21)</div>" +
                                "</div>" +
                                "</div>"
                        }
                        div3.html(strTem)
                    }
                })
            }
        })

    </script>
</body>

</html>